<template>
  <div>
    <input type="text" :placeholder="placeholder" class="search-inp">
    <div class="searchicon iconfont icon-search"></div>
  </div>
</template>

<script>

export default {
  name: "search",
  props:{
    placeholder: String
  }
}
</script>

<style scoped lang="less">
@width:40%;
.searchicon {
  position: relative;
  top: -45px;
  left: @width;
  user-select: none;
  cursor: pointer;
  font-size: 20px;
}


.search-inp {
  padding: 4px 10px 4px;
  width: @width;
  font-size: 18px;
  height: 20px;
  margin: 20px 0px;
  transition: 1s;
  outline: none;
  border: 2px grey solid;

  &:focus {
    border: 2px #3bbade solid;
  }
}
</style>